<template>
  <div class="father">
    <div class="left">
      <p>菜单列表</p>
      <el-tree :data="menuList" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps"> </el-tree>
    </div>
    <div class="right">
      <p>功能权限</p>
      <div>
        <el-checkbox>全部功能</el-checkbox>
        <el-checkbox>删除</el-checkbox>
        <el-checkbox>新增</el-checkbox>
      </div>
      <p>属性查看权</p>
      <div>
        <p>品牌列表</p>
        <div>
          <el-checkbox>全部</el-checkbox>
          <el-checkbox>电话号码</el-checkbox>
          <el-checkbox>姓名</el-checkbox>
          <el-checkbox>地址</el-checkbox>
        </div>
      </div>
      <div>
        <p>门店列表</p>
        <div>
          <el-checkbox>全部</el-checkbox>
          <el-checkbox>电话号码</el-checkbox>
          <el-checkbox>姓名</el-checkbox>
          <el-checkbox>地址</el-checkbox>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  setup() {
    const state = reactive({
      menuList: [
        {
          id: 1,
          label: '首页',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '品牌管理',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>

<style lang="less" scoped>
.father {
  display: flex;
  .left {
    width: 250px;
    height: 100%;
    border: 1px solid #ccc;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-right: 20px;
    p {
      padding: 0 10px;
      color: #b4b4b4;
    }
  }
  .right {
    & > p {
      margin: 10px 0;
    }
    & > div {
      & > p {
        color: #b4b4b4;
      }
    }
  }
}
/deep/.el-icon-caret-right:before {
  content: '';
}
</style>
